/* 禁用题库 */
import React, { PureComponent } from 'react';
import { Tree, Col, Row, Table, Form, Input, Button, Pagination, Modal, message, Cascader } from 'antd';
import AddModal from './AddModal'
import { history } from 'umi';
import { getAuditsList, deleteQuestion, disableQuestion } from '@/services/questionsBank'
import { QuestionTypeSelect, HardLevel, QuestionBankSelect } from './AntComponents'
import Authorized from '@/components/Authorized/Authorized'
const Item = Form.Item;
export default class Index extends PureComponent<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            selectedRowKeys: [],
            dataSource: [],
            count: 1,
            addVisible: false,
            hardLevel: '',
            type: '',
            bank: '',
            currentPage: 1,
            subject: [],
            content: '',
            loading: true
        }
    }
    renderList = (page: string) => {
        const { subject, type, bank, hardLevel, content } = this.state;
        getAuditsList({ content, page, complexity: hardLevel, subject: subject[subject.length - 1] || '', type, types: bank }).then(res => {
            this.setState({
                dataSource: res.data,
                count: res.count,
                loading: false
            })
        })
    }
    showAddModal = () => {
        this.setState({
            addVisible: true
        })
    }
    hideAddModal = () => {
        this.setState({
            addVisible: false
        })
    }
    changeBank = (e: any) => {
        this.setState({
            bank: e
        })
    }
    changeType = (e: any) => {
        this.setState({
            type: e
        })
    }
    changeContent = (e: any) => {
        this.setState({
            content: e.target.value
        })
    }
    changeHardLevel = (e: any) => {
        this.setState({
            hardLevel: e
        })
    }
    changeSubject = (e: any) => {
        this.setState({
            subject: e
        })
    }
    goToEdit = (id: any) => () => {
        history.push('/examInfo/bank/edit/' + id)
    }
    goToShow = (id: any) => () => {
        history.push('/examInfo/bank/show/' + id)
    }
    changePage = (e: any) => {
        this.setState({
            currentPage: e,
            loading: true
        })
        this.renderList(e)
    }
    deleteHandle = () => {
        const { currentPage, selectedRowKeys } = this.state;
        if (!selectedRowKeys[0]) {
            return message.error('请先选择试题')
        }
        Modal.confirm({
            title: '提示',
            content: '确定删除选中试题？',
            onOk: () => {
                this.setState({
                    loading: true
                })
                deleteQuestion({ id: selectedRowKeys }).then(res => {
                    if (res.static === 1) {
                        message.success('已删除');
                        this.setState({
                            selectedRowKeys: []
                        })
                        this.renderList(currentPage)
                    } else {
                        message.error('删除失败')
                    }
                })

            }
        })
    }
    disableQuestion = (is_audit) => () => {
        const { currentPage, selectedRowKeys } = this.state;
        if (!selectedRowKeys[0]) {
            return message.error('请先选择试题')
        }
        Modal.confirm({
            title: '提示',
            content: `确定${is_audit === '1' ? '禁用' : '启用'}选中试题？`,
            onOk: () => {
                this.setState({
                    loading: true
                })
                disableQuestion({ id: selectedRowKeys, is_audit }).then(res => {
                    if (res.status === 1) {
                        message.success(`已${is_audit === '1' ? '禁用' : '启用'}`);
                        this.renderList(currentPage)
                    } else {
                        message.error(`${is_audit === '1' ? '禁用' : '启用'}失败`)
                    }
                })

            }
        })
    }
    searchHandle = () => {
        this.setState({
            loading: true,
            currentPage:1
        })
        this.renderList('1')
    }
    componentDidMount() {
        this.renderList('1')
    }

    render() {
        const { subjectOptions } = this.props;
        const { selectedRowKeys, dataSource, addVisible, hardLevel, type, bank, count, loading, currentPage, subject } = this.state;
        const renderType = (type) => {
            switch (type) {
                case 2:
                    return '多选'
                case 3:
                    return '判断'
                default:
                    return '单选';
            }
        }
        const renderTypes = (types: string) => {
            return types.replace('1', '正式题库').replace('2', '练习题库').replace('3', '模拟题库').replace('4', '每日一题')
        }
        const columns = [
            {
                title: '所属科目',
                dataIndex: 'subjects'
            },
            {
                title: '所属题库',
                dataIndex: 'types',
                render: (types) => {
                    return <p style={{ width: 120 }}>{renderTypes(types)}</p>
                }
            },
            {
                title: '题型',
                dataIndex: 'type',
                render: (type) => {
                    return renderType(type)
                }
            },
            {
                title: '试题内容',
                dataIndex: 'content',

            },
            {
                title: '状态',
                dataIndex: 'is_audit',
                render: (is_audit) => {
                    return is_audit === 1 ? '禁用' : '启用'
                }
            },
            {
                title: '操作',
                dataIndex: 'id',
                render: (id: any) => {
                    return <div style={{ width: 80 }}>
                        <a style={{ marginRight: 20 }} onClick={this.goToShow(id)}>查看</a>
                        <Authorized authority={[303,99998]}>
                            <a onClick={this.goToEdit(id)}>修改</a>
                        </Authorized>
                    </div>
                }
            },
        ]
        const rowSelection = {
            selectedRowKeys,
            onChange: (selectedRowKeys: any) => {
                this.setState({
                    selectedRowKeys
                })
            },
        };

        return (
            <div>
                {/* <Col span={4}>
                    <Tree treeData={subjectTreeData}></Tree>
                </Col> */}
                {/* <Col span={20}> */}
                <div>
                    <div style={{ overflow: 'hidden' }}>
                        <Form layout="inline" style={{ float: 'right', marginBottom: 20 }}>
                            <Item>
                                <Cascader value={subject} style={{ width: 300 }} onChange={this.changeSubject} options={subjectOptions} />
                            </Item>
                            <Item>
                                <QuestionBankSelect value={bank} onChange={this.changeBank} />
                            </Item>
                            <Item>
                                <QuestionTypeSelect value={type} onChange={this.changeType} />
                            </Item>
                            <Item>
                                <HardLevel value={hardLevel} onChange={this.changeHardLevel} />
                            </Item>
                            <Item>
                                <Input placeholder="请输入内容" onChange={this.changeContent} />
                            </Item>
                            <Item>
                                <Button type="primary" onClick={this.searchHandle}>搜索</Button>
                            </Item>
                            <Authorized authority={[302,99997]}>

                                <Item>
                                    <Button type="primary" danger onClick={this.showAddModal}>添加</Button>
                                </Item>
                            </Authorized>
                        </Form>
                    </div>
                    <Table
                        pagination={false}
                        rowSelection={rowSelection}
                        columns={columns}
                        loading={loading}
                        rowKey="id"
                        scroll={{x:1400}}
                        dataSource={dataSource}
                        footer={() => (
                            <React.Fragment>
                                <Button key="1" type="primary" style={{ marginRight: 20 }} onClick={this.disableQuestion('0')}>启用所选</Button>
                                {/* <Button key="2" type="primary" style={{ marginRight: 20 }} onClick={this.disableQuestion('1')}>禁用所选</Button> */}
                                <Authorized authority={[305,999990]}>
                                    <Button key="3" type="primary" danger onClick={this.deleteHandle}>删除所选</Button>
                                </Authorized>
                            </React.Fragment>
                        )}
                    />
                    <Pagination style={{ float: 'right', marginTop: 25 }} current={currentPage*1} pageSize={10} showSizeChanger={false} onChange={this.changePage} total={count} showQuickJumper showTotal={(total, range) => `第${range[0]}条-第${range[1]}条，共 ${total} 条`} />
                </div>
                {/* </Col> */}
                <AddModal addVisible={addVisible} subjectOptions={subjectOptions} renderList={this.renderList} currentPage={currentPage} hideAddModal={this.hideAddModal} />
            </div>
        )
    }
}
